<template>
  <el-row id="cpts-collect-datas-type">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>采集数据分类</span>
        <el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;margin-right: 10px" type="primary" @click="openAddDialog">添加<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>

      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%;"
        max-height="644">
        <el-table-column
          align="center"
          prop="name"
          label="数据类型">
        </el-table-column>
        <el-table-column
          align="center"
          prop="code"
          label="数据类型编码">
        </el-table-column>
        <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
            <el-button :disabled="!isViewEdit"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

    <!--弹窗-->
    <el-dialog :visible.sync="addDialogShow" style="height: 500px">

      <el-row slot="title">
        <span style="font-size: 18px">新增</span>  <el-button @click="submitAdd('ruleForm')" style="margin-left: 800px; padding: 6px 10px"type="primary"  :loading="false">提交</el-button>
      </el-row>

      <el-row>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="140px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="数据类型" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数据类型编码" prop="code">
                <el-input v-model="ruleForm.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="warnDialogShow"
      width="30%">
      <span>该数据正在被使用,删除会影响数据的正常上报。确定需要删除么?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="warnDialogShow = false">取 消</el-button>
    <el-button type="primary" @click="handlerDeleteForWarn">确 定</el-button>
  </span>
    </el-dialog>

  </el-row>
</template>

<script>
    export default {
        name: "collectDatasType",
      data(){
          return {
            isViewShow: false,
            isViewEdit: false,
            activeName:'1',
            addDialogShow: false,
            warnDialogShow: false,
            deleteId: '',
            deleteStatus: 0,
            tableData: [],
            ruleForm:{
              name: "",
              code: ""
            },
            rules: {
              name:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
              code:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
            },
          }
      },
      mounted(){
        let obj = this.validateGlobal.getPermission(21)
        this.isViewShow = obj.isViewShow
        this.isViewEdit = obj.isViewEdit
          this.askListsData()
      },
      methods:{
        openAddDialog(){
           if (!this.addDialogShow) {
             this.addDialogShow = true
           }
           this.resetForm()
        },
        resetForm: function(){   // 表单重置
          if (this.$refs['ruleForm']!==undefined) {
            this.$refs['ruleForm'].resetFields();
          }
        /*  this.ruleForm.status = ''
          this.ruleForm.id = ''
          this.ruleForm.processElementId = ''
          this.ruleForm.name = ''
          this.ruleForm.code = ''
          this.ruleForm.model = ''*/
        },
        handleDelete(index,item){
          this.deleteId = item.id
          if (item.isBinding === 0){
            this.deleteStatus = 0
            this.deleteItem()
          }else{
            this.deleteStatus = 1
            if (!this.warnDialogShow) {
              this.warnDialogShow = true
            }
          }
        },
        handlerDeleteForWarn(){
          this.deleteItem()
          this.warnDialogShow = false
        },
        askListsData: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.collectManage.collectType.lists
          let askData = {
            userId: userId,
          }
          this.http.get(url,askData, res => {
            console.log("deviceLists",res)
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.tableData = res.data
            }else{
              _that.$message('列表获取失败!');
            }
          })
        },
        submitAdd: function (formName) {
          let _that = this
          this.$refs[formName].validate((valid) => {
            if (valid) {
              _that.postNewDatas()
            } else {
              _that.$message('输入有误!');
              return false;
            }
          });
        },
        postNewDatas: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.collectManage.collectType.add + '?userId=' + userId
          let askData = this.ruleForm
          this.http.post(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('添加成功!');
              _that.addDialogShow = false
              _that.askListsData()
            }else{
              _that.$message('新增失败!');
            }
          })
        },
        deleteItem:function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.collectManage.collectType.delete
          let askData = {
            userId: userId,
            isBinding: _that.deleteStatus,
            id:_that.deleteId,
          }
          this.http.get(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('删除成功!');
              _that.askListsData()
            }else{
              _that.$message('删除失败!');
            }
          })
        }
      }

    }
</script>

<style lang="scss">
#cpts-collect-datas-type{

  > .el-card{
    margin: 20px 20px 0 20px;
    height: 780px;
  }
}
</style>
